<template>
    <div class="editor">
        <div class="editor-viewpostOpr d-flex flex-column">
            <button type="button" class="btn-sm btn-outline-secondary"
            @click.stop="goBack"
            >返回</button>
            <button type="button" class=" btn-sm btn-outline-secondary"
            @click.stop="saveContent"
            >保存</button>
        </div>
        <div class="editor-tool mt-2">
            <vue-editor 
            id="editor"
            v-model="content"></vue-editor>
        </div>
    </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
import { savrArticle , getArticle } from "../../../../api/interface/filesystem.js";
import { freshToken } from "../../../../api/interface/token.js";

export default {
    components:{
        VueEditor
    },
    data(){
        return {
            content:""
        };
    },
    inject:["noteAgent"],
    methods:{
        goBack(){
            let note = this.noteAgent();
            this.$store.commit("setCurrentEditArticle", null);
            note.popup.editFile = false;
        },
        saveContent(){
            let that = this;
            let cur_item = this.$store.getters.getCurrentEditArticle;
            if(cur_item){
                console.log(cur_item);
                let contObj = {};
                if( cur_item.art_id ){
                    contObj.art_id = cur_item.art_id;
                    contObj.content = this.content;
                }
                savrArticle(contObj).then( res =>{
                    if( res.data.code == 0 ){
                        this.goBack();
                    }
                } ).catch(err=>{
                    this.$httpError.checkResStatus(err.data,function(){
                    
                    //重新请求生成token
                    freshToken().then(res=>{
                        
                        localStorage.setItem("token", res.data.data.token);
                        that.saveContent();
                    })
                    },that);
                });
            }
            // this.goBack();
        },
        //获取原先文章内容
        fetchData(){
            let that = this;
            let view_curitem = this.$store.getters.getCurrentEditArticle; 
            let artParam = {};
            if( view_curitem.art_id ){
                artParam.art_id = view_curitem.art_id
            }
            getArticle(artParam).then(res=>{
                console.log("获取文章：", res);
                if( res.data.code == 0 ){
                    this.content = res.data.data.content;
                }

            }).catch(err=>{
                this.$httpError.checkResStatus(err.data,function(){
                    
                    //重新请求生成token
                    freshToken().then(res=>{
                        
                        localStorage.setItem("token", res.data.data.token);
                        that.fetchData();
                    })
                },that)
            });
        }
    },
    mounted() {
        this.fetchData();
    },
}
</script>

<style lang="scss">

.editor{
    background-color: antiquewhite;
    padding: 4em;
}
.editor-viewpostOpr{
    display: inline-block;
    position: absolute;
    left: 6%;
}
.editor-tool{
    background-color: white;
    display: inline-block;
    width: 100%;
    
}
#editor{
    width: 100%;
    height: 500px;
}
</style>